﻿@{
    ViewBag.Title = "Meals";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="@Url.Content("~/Content/jquery.fileupload-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery.Jcrop.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.fileupload.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.fileupload-ui.js")" type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/jquery.Jcrop.min.js")' type="text/javascript" ></script>

<h2>@Mui.Meals</h2>
<fieldset><legend>@Mui.Search</legend>
    <input type="text" id="search" />
    <button type="button" id="sb" class="awe-btn ibtn">@Mui.Search</button>
</fieldset>
<br />
<button class="awe-btn" onclick="@(Url.Awe().PopupFormAction().Url(Url.Action("create")).Success("create").Height(300))">
    @Mui.Create</button>
@Html.Awe().AjaxForm().FormClass("frestore").Success("edit")
@Html.Awe().Confirm().Success("del")
@Html.Awe().AjaxList("Meals").SearchButton("sb").Parent("search", "search").CssClass("mealslist")
<script type="text/javascript">
    function del(o) {
        $('#meal' + o.Id).fadeOut(300, function () { $(this).remove(); });
    }
    function edit(o) {
        $('#meal' + o.Id).fadeOut(300, function () { $(this).after(o.Content).remove(); adjustMeals(); });
    }
    function create(o) {
        $('#Meals').parent().find('ul').prepend(o.Content);
    }

    function updateMeal(id) {
        $.post('@Url.Action("GetMeal")', { id: id }, edit);
    }

    $(function () {
        $(document).ajaxComplete(adjustMeals);
        $(window).resize(adjustMeals);
    });

    function adjustMeals() {
        if ($.support.cors)
            $(".notcool").hide();
        else
            $(".cool").hide();

        var w = $('#main').width();
        var space = w % 492;
        var cat = (w - space) / 492;
        var u = (space / cat);
        var nw = 449.5 + u;
        $('.meal').width(nw);
        $('.comments').css('width', $('.comments:first').parent().width() - $('.comments:first').prev().width() - 20);
    }
</script>
